import { defineComponent } from "vue";
import Back from "@/components/Back";
import ButtonView from "@/components/ButtonView";
import style from "./index.module.less";
import pointsPic from "./assets/pointsPic.png";
import { dividerProps } from "vant";
import giftBoxPic from './assets/giftBox.png';

export default defineComponent({
  setup(props, {}) {
    const gitfs = [
        {
            name: "1品牌打印机",
            points: 100
        },
        {
            name: "2品牌打印机",
            points: 200
        },
        {
            name: "3品牌打印机",
            points: 300
        }
    ];
    return () => (
      <div class={[style["index"]]}>
        <Back text="奖励兑换" />
        <div class={style["content"]}>
            <p class="font-bold text-30 w-[127px] inline-block mr-73">共富积分换好礼</p>
            <img src={giftBoxPic} alt="" class="w-[120px] inline-block mt-[-10px]" />
            <div class={style["gift"]}>
                {gitfs.map((g, i) => {
                    return (
                        <div class={style["giftItem"]}>
                            <img src={giftBoxPic} alt="" class="w-full h-[110px]" />
                            <p class="font-bold text-14 mt-20 ml-11 mr-6">{g.name}</p>
                            <p class="text-12 mt-10 ml-11" style={{color:"#DB0000"}}>{g.points}积分 <span class="inline-block p-4 text-10" style={{backgroundColor: "#FFEFD4", color:"#DB8B00"}}>限换一件</span></p>
                            <span class={["inpine-block w-80 h-25 text-12", style["btn"]]} >积分不足</span>
                        </div>
                    )
                })}
                
            </div>
        </div>
      </div>
    );
  },
});